<template>
    <div class="actual-new-finance">
        <v-dialog
            title="查看"
            :show.sync="dialogVisible"
            width="1200px"
            @beforeClose="beforeClose"
            :close-on-click-modal="false">
            <div class="card-box">
                <div class="card-title">基本信息</div>
                <el-form ref="editForm" :model="showForm" class="form-wrap" size="small" label-position="top">
                    <el-form-item label="关联合同" prop="propertyNames">
                        <span>{{showForm.propertyNames}}</span>
                    </el-form-item>
                    <el-form-item label="收款项目" prop="chargeProjectName">
                        <span>{{showForm.chargeProjectName}}</span>
                    </el-form-item>
                    <el-form-item label="出租方" prop="customerName">
                        <span>{{showForm.customerName}}</span>
                    </el-form-item>
                    <el-form-item label="合同应收金额" prop="receivableMoneyOld">
                        <span>{{showForm.receivableMoneyOld}}</span>
                    </el-form-item>
                    <el-form-item label="费用周期" prop="costPeriodArr">
                        <span>{{showForm.costPeriodStart}}至{{showForm.costPeriodEnd}}</span>
                    </el-form-item>
                    <el-form-item label="应收日期" prop="receivableDate">
                        <span>{{showForm.receivableDate}}</span>
                    </el-form-item>
                    <el-form-item label="备注" class="full" prop="remarks">
                        <span>{{showForm.remarks}}</span>
                    </el-form-item>
                </el-form>
                <div class="card-title">上传文件</div>
                <div class="handling-opinions">
                    <v-upload
                        ref="collectionUpload"
                        :busId="projectId"
                        modelType="finance"
                        isShowFileList
                        :isView="true"
                        multiple
                        v-model="fileList"/>
                </div>
                <div class="card-title">办理意见</div>
                <div class="handling-opinions">
                    <approval-record v-for="(item,index) in recordingLlist" :key="index" v-bind="item"></approval-record>
                </div>
            </div>
            <div class="card-box"><el-button class="btn" type="primary" size="small" @click="go()">关闭</el-button></div>
        </v-dialog>
    </div>
</template>

<script>
    import {getCollection,getApprovalRecord} from '../../api/collection'
    export default {
        name: "show-actual",
        data() {
            return {
                dialogVisible: false,
                fileList: [],
                recordingLlist: [],
                projectId: '',
                showForm: {
                    rentContractId:'',
                    receivableId: '',
                    propertyNames: '',
                    chargeProjectId: '',
                    chargeProjectName: '',
                    customerName: '',
                    receivableMoneyOld: '',
                    costPeriodArr: '',
                    costPeriodStart: '',
                    costPeriodEnd: '',
                    receivableDate: '',
                    remarks: '',
                    opinion: '',
                    payableStatus: '',
                    projectName: '',
                    customerId: ''
                }
            }
        },
        methods: {
            //打开弹框
            show(item){
                this.dialogVisible=true
                if(item){
                    this.projectId = item.adjustmentId
                    getCollection(item.receivableId).then(res=>{
                        if (res.data.code === 0) {
                            this.showForm = res.data.data
                        }
                    })
                    this.approvalRecord(item.adjustmentId)
                }
            },
            //关闭弹框
            beforeClose(done) {
                this.$emit('beforeClose')
            },
            go(){
                this.dialogVisible = false
							this.$emit('handleClose')
            },
            //办理意见获取数据
            async approvalRecord(id) {
                const res = await getApprovalRecord(id)
                if (res.data.code == 0) {
                    this.recordingLlist = res.data.data
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    @include formWrap(4);
    .card-box {
        position: relative;
        min-height: 55px;
        .handling-opinions {
            padding: 20px;
        }
        .btn {
            position: absolute;
            top: 10px;
            right: 15px;
        }
    }
</style>
